import 'package:flutter/material.dart';
import 'package:znmm/config/app_color.dart';

class DashboardPage extends StatelessWidget {
  const DashboardPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.backgroundColor,
      appBar: AppBar(
        title: Text(
          '数据看板',
          style: TextStyle(color: AppColor.black, fontWeight: FontWeight.w500),
        ),
        backgroundColor: AppColor.white,
        centerTitle: true,
        actions: [
          IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.person,
                color: AppColor.black,
              )),
          IconButton(
              onPressed: () {},
              icon: Icon(Icons.calendar_today, color: AppColor.black)),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SectionTitle(title: '营销数据'),
            const SizedBox(height: 8),
            GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, // Two items per row
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
                childAspectRatio:
                    1.8, // Adjust aspect ratio to make it rectangular
              ),
              itemCount: 4,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                final titles = [
                  '新增企业收藏',
                  '新增联系人收藏',
                  '群发邮件数量（封）',
                  '群发短信数量（封）',
                ];
                return StatisticCard(
                  title: titles[index],
                  value: '0',
                );
              },
            ),
            const SizedBox(height: 16),
            const SectionTitle(title: '邮件转化漏斗'),
            const SizedBox(height: 8),
            const ConversionStep(
              stepNumber: 1,
              title: '发送邮件数（封）',
              value: '100',
              percentage: 0.1,
            ),
            const ConversionStep(
              stepNumber: 2,
              title: '邮件成功数（封）',
              value: '0',
              percentage: 0.0,
            ),
            const ConversionStep(
              stepNumber: 3,
              title: '邮件点击数（封）',
              value: '0',
              percentage: 0.0,
            ),
          ],
        ),
      ),
    );
  }
}

class SectionTitle extends StatelessWidget {
  final String title;

  const SectionTitle({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: 4,
          height: 20,
          color: Colors.orange,
        ),
        const SizedBox(width: 8),
        Text(
          title,
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

class StatisticCard extends StatelessWidget {
  final String title;
  final String value;

  const StatisticCard({super.key, required this.title, required this.value});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 8,
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(fontSize: 14, color: Colors.grey),
          ),
          const Spacer(),
          Expanded(
              child: Text(
            value,
            style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          )),
        ],
      ),
    );
  }
}

/*
class ConversionStep extends StatelessWidget {
  final int stepNumber;
  final String title;
  final String value;
  final double percentage;

  const ConversionStep({
    super.key,
    required this.stepNumber,
    required this.title,
    required this.value,
    required this.percentage,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              decoration: BoxDecoration(
                color: Colors.orange,
                borderRadius: BorderRadius.circular(4),
              ),
              child: Text(
                stepNumber.toString(),
                style: const TextStyle(color: Colors.white),
              ),
            ),
            const SizedBox(width: 8),
            Text(title),
            const Spacer(),
            Text(value),
          ],
        ),
        const SizedBox(height: 4),
        LinearProgressIndicator(
          value: percentage,
          backgroundColor: Colors.grey.shade200,
          color: Colors.orange,
        ),
        const SizedBox(height: 8),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '${(percentage * 100).toStringAsFixed(2)}%',
              style: const TextStyle(color: Colors.orange),
            ),
          ],
        ),
        const SizedBox(height: 16),
      ],
    );
  }
}
*/

class ConversionStep extends StatelessWidget {
  final int stepNumber;
  final String title;
  final String value;
  final double percentage;

  const ConversionStep({
    super.key,
    required this.stepNumber,
    required this.title,
    required this.value,
    required this.percentage,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              decoration: BoxDecoration(
                color: Colors.orange.withOpacity(0.1),
                borderRadius: BorderRadius.circular(4),
              ),
              child: Text(
                stepNumber.toString(),
                style: const TextStyle(color: Colors.orange),
              ),
            ),
            const SizedBox(width: 8),
            Text(title),
            const Spacer(),
            Text(value),
          ],
        ),
        const SizedBox(height: 4),
        LinearProgressIndicator(
          value: percentage,
          backgroundColor: Colors.grey.shade200,
          color: Colors.orange,
        ),
        const SizedBox(height: 8),
        Stack(
          alignment: Alignment.center,
          children: [
            CustomPaint(
              size: const Size(100, 40), // Width matches the rectangle
              painter: ArrowPainter(),
            ),
            Text(
              '${(percentage * 100).toStringAsFixed(2)}%',
              style: const TextStyle(color: Colors.black, fontSize: 12),
            ),
          ],
        ),
        const SizedBox(height: 16),
      ],
    );
  }
}

class ArrowPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // final paint = Paint()
    //   ..color = Colors.orange.withOpacity(0.2) // 箭头颜色
    //   ..style = PaintingStyle.fill;

    // 创建一个线性渐变
    final gradient = LinearGradient(
      begin: Alignment.bottomCenter, // 渐变起始点
      end: Alignment.topCenter, // 渐变结束点
      colors: [
        Colors.orange.withOpacity(0.2), // 起始颜色
        Colors.white.withOpacity(0.2), // 结束颜色
      ],
    );

    // 创建一个带有渐变颜色的画笔
    final paint = Paint()
      ..shader =
          gradient.createShader(Rect.fromLTWH(0, 0, size.width, size.height))
      ..style = PaintingStyle.fill;

    //绘图一般是左上角(0,0)
    double fh = 10;
    final path = Path()
      ..moveTo(size.width / 2, size.height) // 底部中心1
      ..lineTo(0, size.height / 2 - fh) // 左边点2
      ..lineTo(size.width / 4, size.height / 2 - fh) //3
      ..lineTo(size.width / 4, 0) //4
      ..lineTo(3 * size.width / 4, 0) //5
      ..lineTo(3 * size.width / 4, size.height / 2 - fh) //6
      ..lineTo(size.width, size.height / 2 - fh) // 右边点7
      ..close(); // 闭合路径

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}
